<template>
  <div class="storeProjectsQrRecord">
    <c-title text="二维码核销记录"></c-title>
    <div class="listBox">
      <template v-if="list.length == 0">
        <van-empty image="search" description="暂无记录" />
      </template>
      <template v-if="list.length > 0">
        <div class="lis" v-for="item in list" :key="item.id">
          <div class="lis_line" v-if="item.qr_order">
            <div class="lis_line_left">二维码ID:{{ item.qr_order.id }}</div>
            <div class="lis_line_right">{{ item.qr_order.verify_time }}</div>
          </div>
          <div class="lis_line">
            <div class="lis_line_left" v-if="item.has_one_customer">
              <div class="user">
                <img :src="item.has_one_customer.avatar_image" alt="" />
              </div>
              <div class="userName">{{ item.has_one_customer.nickname }}</div>
            </div>
            <div class="lis_line_right" v-if="item.qr_order">{{ item.qr_order.check_name }}</div>
          </div>
          <div class="goodBox" v-if="item.qr_order && item.qr_order.goods">
            <div class="goodimg">
              <img :src="item.qr_order.goods.thumb" alt="" />
            </div>
            <div class="goodDes">
              <div class="goodTitle">{{ item.qr_order.goods.title }}</div>
              <div class="goodPrice">{{ $i18n.t("money") }}{{ item.qr_order.goods.price }}</div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    async getData() {
      let { data, msg, result } = await $http.post("plugin.store-projects-qrchain.frontend.qrchain.member-qr-list", {}, "");
      if (result) {
        this.list = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let { data, msg, result } = await $http.post(
          "plugin.store-projects-qrchain.frontend.qrchain.member-qr-list",
          {
            page: this.page
          },
          ""
        );
        if (result) {
          this.isLoadMore = true;
          this.list = this.list.concat(data.data);
        } else {
          this.page = this.page - 1;
          this.isLoadMore = false;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.listBox {
  margin: 0 0.63rem;
  padding-bottom: 2rem;
  .lis {
    margin-bottom: 0.63rem;
    padding: 0.75rem 0.75rem 0 0.75rem;
    box-sizing: border-box;
    background: #fff;
    margin-top: 1rem;
    border-radius: 0.5rem;
    .goodBox {
      padding: 1rem 0.5rem;
      padding-top: 0.5rem;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .goodimg {
        flex-shrink: 0;
        width: 2.85rem;
        height: 2.85rem;
        background: #999;
        border-radius: 0.35rem;
        margin-right: 0.35rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.35rem;
        }
      }
      .goodDes {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goodTitle {
          text-align: left;
          color: #000;
        }
        .goodPrice {
          text-align: left;
          color: red;
        }
      }
    }
    .lis_line {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      font-size: 14px;
      .lis_line_left {
        color: #000;
        display: flex;
        align-items: center;
        .user {
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 50%;
          margin-right: 0.35rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .userName {
          color: #9a9a9a;
        }
      }
      .lis_line_right {
        color: #9a9a9a;
      }
    }
  }
}
</style>
